<template>
  <!--已完成订单表格-->
  <el-table
    :data="orderMsg"
    style="width: 100%">
    <el-table-column
      prop="orderId"
      label="订单号"
      width="180">
    </el-table-column>

    <el-table-column
      prop="restaurantName"
      label="店名"
      width="180">
    </el-table-column>

    <el-table-column
      prop="orderFoods"
      label="菜品列表">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <div v-for="food in scope.row.orderFoods">
            <span>{{food.title}}  :  {{food.count}}份   单价:  {{food.price}}</span>
          </div>
          <div slot="reference" class="name-wrapper">
            <i class="el-icon-more"></i>
            <span>{{scope.row.orderFoods[0].title}}</span>

          </div>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column
      prop="address"
      label="收货信息">
    </el-table-column>


    <el-table-column
      prop="sta"
      label="订单状态"
      :filters="[{ text: '已完成', value: 0 }, { text: '已送达', value: 4 }]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
      <template slot-scope="scope">

        <div v-if="scope.row.sta===0">
          <el-tag
            type="success"
            effect="dark">
            已完成
          </el-tag>
          <el-button @click="showComment(scope.$index, scope.row)">查看评价</el-button>
        </div>

      </template>
    </el-table-column>
  </el-table>
</template>

<script>
    export default {
        name: "CompletedOrder",
      data() {
        return {
          orderMsg: [],
        }
      },
      created() {
          this.$axios({
            method: "get",
            url: "/order/completed",
            params: {
              rid: this.$store.getters.rid
            }
          })
            .then(response => {
              if (response.data.success) {
                this.orderMsg=response.data.completed_order_list;
              }
              console.log(response.data.message);
            })
            .catch(error => console.log(error))
      },
      methods: {
        filterTag(value, row) {
          return row.sta === value;
        },
      //  查看此订单的评价
        showComment(index, row) {
          console.log("查看"+ row.id + "我的评论");
          this.$axios({
            method: "get",
            url: "/order/mycomment",
            params: {
              id: row.id
            }
          })
            .then(response => {
              if (response.data.success) {
                this.$notify({
                  title: response.data.rate+'星',
                  message: response.data.content,
                  duration: 0
                });
              }
              console.log(response.data.message);
            })
            .catch(error => console.log(error))
        }
      }
    }
</script>

<style scoped>

</style>
